<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<title>用户登录</title>
		<link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../lib/layui/css/login.css" />
		<script type="text/javascript" src="../lib/layui/layui.js"></script>
	</head>

	<body>
		<div class="login-wrapper" style="background-color: lightgray">
			<div class=" login-body">
				<div class="layui-card">
					<div class="layui-card-header">
						<i class="layui-icon layui-icon-home"></i>&nbsp;&nbsp;用户登录
					</div>
					<div class="layui-card-body layui-form layui-form-pane">
						<!--用户名-->
						<div class="layui-form-item">
							<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
							<div class="layui-input-inline">
								<input name="username" type="text" required lay-verify="required" autocomplete="off" placeholder="账号" class="layui-input">
							</div>
							<div class="layui-form-mid" style="color: red;">*</div>
						</div>
						<!--密码-->
						<div class="layui-form-item">
							<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
							<div class="layui-input-inline">
								<input name="password" type="password" required lay-verify="required" autocomplete="off" placeholder="密码" class="layui-input">
							</div>
							<div class="layui-form-mid" style="color: red;">*</div>
						</div>
						<!--注册和忘记密码-->
						<div class="layui-form-item">
							<!--<a href="register.html" class="layui-link">帐号注册</a>-->
							<a href="forget.html" class="layui-link pull-right">忘记密码？</a>
						</div>
						<div class="layui-form-item">
							<button lay-filter="login-submit" class="layui-btn layui-btn-fluid layui-btn-radius" lay-submit>登 录</button>
						</div>
						<hr />
						<div class="layui-form-item login-other">
							<div>
								<label>其他登录方式</label>
							</div>
							<div>
								<a href="phonelogin.html" title="手机登录"><i class="layui-icon layui-icon-cellphone"></i></a>
								<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" ></i></a>
								<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
								<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="login-footer">
				<p>© 2019 </p>
			</div>
		</div>

		<script>
			layui.config({
				base: 'module/'
			}).use(['form'], function() {
				var $ = layui.jquery;
				var form = layui.form;
				

				// 表单提交
				form.on('submit(login-submit)', function(obj) {
					var field = obj.field;
//					layer.load(2);
					$.ajax({
						url: 'http://localhost:8080/user/login',
						data: field,
						contentType: "application/x-www-form-urlencoded",
						type: 'POST',
						xhrFields: {
							withCredentials: true
						},
						success: function(data) {
							if(data.status == "success") {
								layer.msg('登录成功', {
									icon: 1,
									time: 1000
								}, function() {
									//登录后不可再返回登录页
									// 12311111111
									//location.replace('index.html');
									location.href = "index.html";
								});
							} else {
//								layer.closeAll('loading');
								layer.msg(data.data.errMsg, {
									icon: 5,
									time:1000
								});
								//$('.login-captcha').trigger('click');
							}
						},
						error: function(xhr) {
							console.log('error');
							console.log(xhr);
							layer.msg('请按F12查看控制台信息', {
								icon: 5,
								time:1000
							});
						}
					});
				});
				// 图形验证码
//				$('.login-captcha').click(function() {
//					this.src = this.src + '?t=' + (new Date).getTime();
//				});
			});
		</script>
	</body>

</html>